<script setup lang="ts">
import category from "@/components/Category/index.vue";
import useCategory from "@/store/category.ts";
import { ref, watch } from "vue";
import { reqSPU } from "@/api/product/spu";
import type { ResData, SpuData } from "@/api/product/spu/type.ts";

import spuForm from "./spuForm.vue";
import skuForm from "./skuForm.vue";

let scene = ref<number>(0);
let currentPage = ref<number>(1);
let pageSize = ref<number>(4);
let total = ref<number>(4);

let categoryStore = useCategory();

let Records = ref<SpuData[]>([]);

const SpuFormRef = ref();

const handleCurrentChange = () => {
  getSPU();
};

const handleSizeChange = () => {
  getSPU();
};

watch(
  () => categoryStore.c3ID,
  () => {
    if (!categoryStore.c3ID) return;
    getSPU();
  },
);

const getSPU = async () => {
  const result: ResData = await reqSPU(
    currentPage.value,
    pageSize.value,
    categoryStore.c3ID,
  );
  if (result.data.code === 200) {
    Records.value = result.data.data.records;
    total.value = result.data.data.total;
  }
};

const toAddSPU = () => {
  scene.value = 1;
  SpuFormRef.value.initAdd(categoryStore.c3ID);
};

const toUpdateSPU = (row: SpuData) => {
  scene.value = 1;
  SpuFormRef.value.init(row);
};

const toAddSKU = () => {
  scene.value = 2;
};

// 自定义事件对调，回到场景num
const changeScene = (num: number) => {
  scene.value = num;
  getSPU();
};
</script>

<template>
  <div>
    <category :scene="scene" />
    <!-- SPU -->
    <el-card v-show="scene == 0" style="margin: 10px 0">
      <el-button
        type="primary"
        icon="Plus"
        @click="toAddSPU"
        :disabled="!categoryStore.c3ID"
        >添加SPU</el-button
      >
      <el-table border style="margin: 10px 0" :data="Records">
        <el-table-column
          type="index"
          label="序号"
          align="center"
          width="100px"
        ></el-table-column>
        <el-table-column
          label="名称"
          align="center"
          prop="spuName"
        ></el-table-column>
        <el-table-column
          label="描述"
          align="center"
          prop="description"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column label="操作" align="center" width="260px">
          <template #default="{ row }">
            <el-button
              type="primary"
              size="small"
              icon="Plus"
              title="添加SKU"
              @click="toAddSKU"
            ></el-button>
            <el-button
              type="warning"
              size="small"
              icon="Edit"
              title="编辑SPU"
              @click="toUpdateSPU(row)"
            ></el-button>
            <el-button
              type="info"
              size="small"
              icon="View"
              title="查看SKU"
            ></el-button>
            <el-button
              type="danger"
              size="small"
              icon="Delete"
              title="删除SPU"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[4, 6, 8, 10]"
        layout="prev, pager, next, jumper, ->, sizes, total,"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <!-- 添加或修改SPU -->
    <el-card v-show="scene == 1" style="margin: 10px 0">
      <spuForm ref="SpuFormRef" @changeScene="changeScene" />
    </el-card>
    <!-- 添加SKU -->
    <el-card v-show="scene == 2" style="margin: 10px 0">
      <skuForm />
    </el-card>
  </div>
</template>

<style scoped lang="scss"></style>
